<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>表格</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            基本表格
                        </div>
                        <div class="panel-body">
                            <table class="table">
                                <caption>基本表格样式<code>.table</code></caption>
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>项目名称</th>
                                        <th>开始日期</th>
                                        <th>项目进度</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>软件项目</td>
                                        <td>2022-10-10</td>
                                        <td>10%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">2</th>
                                        <td>地产项目</td>
                                        <td>2020-03-01</td>
                                        <td>99%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td>电商项目</td>
                                        <td>2022-05-15</td>
                                        <td>40%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">4</th>
                                        <td>医疗项目</td>
                                        <td>2022-04-15</td>
                                        <td>75%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            条纹状表格
                        </div>
                        <div class="panel-body">
                            <table class="table table-striped">
                                <caption>条纹状表格样式<code>.table-striped</code></caption>
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>项目名称</th>
                                        <th>开始日期</th>
                                        <th>项目进度</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>软件项目</td>
                                        <td>2022-10-10</td>
                                        <td>10%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">2</th>
                                        <td>地产项目</td>
                                        <td>2020-03-01</td>
                                        <td>99%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td>电商项目</td>
                                        <td>2022-05-15</td>
                                        <td>40%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">4</th>
                                        <td>医疗项目</td>
                                        <td>2022-04-15</td>
                                        <td>75%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            带边框的表格
                        </div>
                        <div class="panel-body">
                            <table class="table table-bordered">
                                <caption><code>.table-bordered</code></caption>
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>项目名称</th>
                                        <th>开始日期</th>
                                        <th>项目进度</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>软件项目</td>
                                        <td>2022-10-10</td>
                                        <td>10%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">2</th>
                                        <td>地产项目</td>
                                        <td>2020-03-01</td>
                                        <td>99%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td>电商项目</td>
                                        <td>2022-05-15</td>
                                        <td>40%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">4</th>
                                        <td>医疗项目</td>
                                        <td>2022-04-15</td>
                                        <td>75%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            鼠标悬停
                        </div>
                        <div class="panel-body table-responsive">
                            <table class="table table-hover">
                                <caption>鼠标悬停表格样式<code>.table-hover</code></caption>
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>项目名称</th>
                                        <th>开始日期</th>
                                        <th>项目进度</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>软件项目</td>
                                        <td>2022-10-10</td>
                                        <td>10%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">2</th>
                                        <td>地产项目</td>
                                        <td>2020-03-01</td>
                                        <td>99%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td>电商项目</td>
                                        <td>2022-05-15</td>
                                        <td>40%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">4</th>
                                        <td>医疗项目</td>
                                        <td>2022-04-15</td>
                                        <td>75%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            状态类
                        </div>
                        <div class="panel-body">
                            <table class="table">
                                <thead class="bg-gray">
                                    <tr>
                                        <th>序号</th>
                                        <th>项目名称</th>
                                        <th>开始日期</th>
                                        <th>项目进度</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="success">
                                        <th scope="row">1</th>
                                        <td>软件项目</td>
                                        <td>2022-10-10</td>
                                        <td>10%</td>
                                    </tr>
                                    <tr class="info">
                                        <th scope="row">2</th>
                                        <td>地产项目</td>
                                        <td>2020-03-01</td>
                                        <td>99%</td>
                                    </tr>
                                    <tr class="warning">
                                        <th scope="row">3</th>
                                        <td>电商项目</td>
                                        <td>2022-05-15</td>
                                        <td>40%</td>
                                    </tr>
                                    <tr class="danger">
                                        <th scope="row">4</th>
                                        <td>医疗项目</td>
                                        <td>2022-04-15</td>
                                        <td>75%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            紧缩表格
                        </div>
                        <div class="panel-body">
                            <table class="table table-condensed">
                                <caption>紧缩表格样式<code>.table-condensed</code></caption>
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>项目名称</th>
                                        <th>开始日期</th>
                                        <th>项目进度</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>软件项目</td>
                                        <td>2022-10-10</td>
                                        <td>10%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">2</th>
                                        <td>地产项目</td>
                                        <td>2020-03-01</td>
                                        <td>99%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td>电商项目</td>
                                        <td>2022-05-15</td>
                                        <td>40%</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">4</th>
                                        <td>医疗项目</td>
                                        <td>2022-04-15</td>
                                        <td>75%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
</body>

</html>